<!DOCTYPE html>
<html>
	<head> 
		<meta charset="UTF-8">
		<title></title>
		 <link rel="stylesheet" href="css/lib/bootstrap.min.css" />
	    <script src="js/jquery.min.js"></script>
	    <script src="js/lib/bootstrap.min.js"></script>
	   <!--  <script src="js/lib/vue.min.js"></script>
	   <script src="js/lib/vue-resource.js"></script> -->
	   <script src="./js/lib/angular.min.js"></script>
	   <script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		body{
			font-size:12px;
		}
		table,
		th,
		td {
			border: 1px solid #f1f1f1;
			border-collapse: collapse;
			padding: 5px;
			vertical-align: middle !important;
		}		
		input{
			width:280px;
		}
		span{
			width:20px;color:red;display:inline-block;text-align:center;
		}
		#sho{
			width:300px;
			height:50px;
			background:#d9534f;
			opacity:0.8;
			border-radius:8px;
			color:#fff;
			text-align: center;
			font-size:30px;
			position: absolute;
			top:0px;
			left:550px;
			display:none;
		}
		img{
			margin:20px 5% 5% 10px;
			width:90%;
			border-radius:5px;
			box-shadow:2px 3px 5px;
			transition:.5s all;			
		}
		img:nth-child(1){
			margin-left:200px;
		}
		/* img:hover{
			transform:scale(6);
		} */
	</style>
	<body ng-app="myApp" ng-controller="customersCtrl">		
		<div class="">
			<div id="sho"></div>
		<div style="width:100%;margin:0 auto;padding:15px 5px 0px 5px;border:1px solid #ccc;margin-bottom:15px">	   		
			<table class="table table-hover">				
				<tbody>
					<tr>
						<th colspan="8">投放广告预览:</th>
					</tr>
					<tr class="text-center" style="background:#ccc;color:#fff">
						<td>品牌</td>
						<td>广告编号</td>
						<td>广告标题</td>	
						<td>广告图片</td>
						<td style="width:200px;overflow:hidden;">广告链接</td>
						<td>上传日期</td>
						<!-- <td>修改</td> -->
						<td>删除</td>																				
					</tr>
					<tr class="text-center" ng-repeat="i in list">
		                <td>{{i.brandId}}</td>
		                <td>{{i.id}}</td>
		                <td>{{i.title}}</td>	
						<td>{{i.imgurl}}<a href="#" data-toggle="modal" data-target="#dle" style="margin-right:30px;display:inline-block;width:60px;color:red" ng-click="add(i)">查看详情</a></td>
						<td>{{i.url}}</td>
						<td>{{i.updatetime}}</td>
						<!-- <td><button class="btn btn-danger" data-toggle="modal" data-target="#dle2" ng-click="amend(i)">修改</button></td> -->
						<td><button class="btn btn-danger" data-toggle="modal" data-target="#dle1" ng-click="del(i)">删除</button></td>																		
					</tr>					
				</tbody>
			</table>
		</div>
			<!--查看弹窗-->
			 	<div class="modal fade" role="dialog" id="dle">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button class="close" data-dismiss="modal">
									<span class="">&times;</span>
								</button>
								<h4 class="modal-title">查看广告图片</h4>
							</div>
							<img id="img" src="" alt="">
							<!-- <div class="modal-body text-right">
								 <button class="btn btn-primary" data-dismiss="modal" ng-click="que(i)">确认</button>
								<button class="btn btn-danger" data-dismiss="modal">取消</button> 
							</div> -->
						</div>
					</div>
				</div>
				<!--删除弹窗-->
				<div class="modal fade" role="dialog" id="dle1">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button class="close" data-dismiss="modal">
									<span class="">&times;</span>
								</button>
								<h4 class="modal-title">确定删除轮播广告图片?</h4>
							</div>
							<div class="modal-body text-right">
								 <button class="btn btn-primary" data-dismiss="modal" ng-click="que(i)">确认</button>
								<button class="btn btn-danger" data-dismiss="modal">取消</button> 
							</div>
						</div>
					</div>
				</div>
				<!--修改弹窗-->
				<div class="modal fade" role="dialog" id="dle2">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button class="close" data-dismiss="modal">
									<span class="">&times;</span>
								</button>
								<h4 class="modal-title">修改轮播广告图片</h4>
							</div>
							<div class="modal-body text-right">
								<form id="fm" method="post" enctype="multipart/form-data" >	
								<table class="table table-hover">				
									<tbody>
										<tr>
											<th colspan="8">广告投放:</th>
										</tr>
										<!-- <tr style="display:none">
											<td>标题:</td>
											<td colspan="8">
												<input id="p1" name="title" value="" class="form-control" type="text" style="width:280px"/>
											</td>								
										</tr> -->
										<tr>
											<td>广告链接:</td>
											<td colspan="8">
												<input id="p2" name="url" class="form-control" type="text" placeholder="例如：www.baidu.com" style="width:280px"/>
											</td>								
										</tr>
										<tr>
											<td>图片id:</td>
											<td colspan="8">
												<input id="p4" name="id" class="form-control" placeholder="例如：1" type="text" style="width:280px"/>
											</td>								
										</tr>
										<tr>
											<td>图片上传:</td>
											<td colspan="8">
												<input id="p3" name="image" class="form-control" type="file" style="width:280px"/>
											</td>								
										</tr>	
										<tr>
											<td colspan="8">
												<input class="btn btn-danger" type="submit"  id="submit" value="广告上传"/>
											</td>								
										</tr>
										
									</tbody>
								</table>
								</form>
								 <button class="btn btn-primary" data-dismiss="modal" ng-click="adm(i)">确认</button>
								<button class="btn btn-danger" data-dismiss="modal">取消</button> 
							</div>
						</div>
					</div>
				</div>  
		<div style="height:500px;"></div>
		</div>
	</body>
	<script>
		var app = angular.module('myApp', []);
		app.controller('customersCtrl', function($scope, $http ){ 
			var bd = sessionStorage.getItem(key = 3);
			var data = {brand_id:bd}
                   console.log(data);
                   /*加载*/
                   $http({
                   method: 'POST',
                   params:data,
                   url: window.baseUrl+'user/app/slideshow/query/brandid'
                   }).then(function successCallback(data){
                           console.log("请求所有数据成功...")
                           console.log(data.data.result)
                           $scope.list = data.data.result
                   }, function errorCallback(data){
                           console.log("请求数据失败...")
                           alert("网络错误，请重试")
                   });
                   $scope.add = function(i){
                   		console.log(i.imgurl);
                   		$('#img').attr('src',i.imgurl)
                   }
                   /*点击删除弹窗*/
                   $scope.del = function(i){
                   		console.log(i.id);
                   	    sessionStorage.setItem(99,i.id);
                   }
                   /*确认删除轮播图*/
				   $scope.que = function(){
				   		var x = sessionStorage.getItem(99);
						var data = {
							id:x
						}
						console.log(data)
	           			 $http({
		                   method:'POST',
		                   params:data,
		                   url:window.baseUrl+'user/app/slideshow/delect/id'
		                   }).then(function successCallback(data){
		                           console.log(data);
		                           window.location.href="广告预览.html"		                          
		                   }, function errorCallback(data){
		                           console.log(data)
		                           alert("网络错误，请重试")
		                   });
	           	   }
	           	   /*点击修改弹窗*/
	           	   $scope.amend = function(i){
	           	   		console.log(i.id);
	           	   		document.getElementById('p4').value=i.id;
	           	   		var token = sessionStorage.getItem(key = 1);
						var api = window.baseUrl+"user/app/slideshow/add/"+token;
						console.log(api);
						document.getElementById('fm').action = api     
	           	   }
	           	   /*确认修改轮播图*/
	           	   $scope.adm = function(){
	           	   		document.getElementById('fm').submit();	           	   		
	           	   }
		})
	</script>
	<script>
			/*$(function(){
				new Vue({
					el:"body",
					data:{
						list:[]
					},
					created:function(){
						alert("加载中！")
						this.$http.post(window.baseUrl+"user/app/slideshow/query/brandid",{brand_id:2},{emulateJSON:true}).then(
		 						   function (res) { 
		 						    console.log(res);
		 						    this.list = res.data.result;
								    console.log(this.list)
		 						   },function (res) {
		 						   		alert("网络断开！请检查网络") 									   						 
								   } 
		 						  );
			 			
					}
				})
			})*/
		
	</script>
</html>




